<script setup lang="ts">
// 引入vue
import { ref, onMounted } from "vue"
// 引入标题
import indexTitle from './indexTitle.vue';
// 引入接口
import { getAccessSituation } from "@/api/index"
// 引入echarts组件
import Echarts from "./Echarts.vue";
// 引入适配方法
import setResize from "@/hook/Resize";
// 调用适配方法
setResize()
// 定义任意类型
interface anyType {
    [key: string]: any
}
// 定义图表ref
const myEcharts = ref()
// 定义唯一标识符 更新视图图表
const key = ref(0)

// 定义寝室楼信息
const floorData = ref()
// 定义options数据
const options = ref<anyType>({})

// 发起请求
getAccessSituation().then(res => {
    // console.log(1111, res);
    // 解构图表数据 和 表格数据
    const { option, tableData } = res.data.data.result[0]
    // console.log(option, tableData);
    // 赋值
    floorData.value = tableData
    // 赋值option
    options.value = option
    // 每次请求key都更新
    key.value = +new Date()
})



</script>

<template>
    <!-- 中间部分 -->
    <div class="left-centent_container">
        <!-- 标题 -->
        <indexTitle title="门禁情况" :show="true"></indexTitle>
        <!-- 内容部分 -->
        <div class="left-centent-conter">
            <!-- 图表 -->
            <div class="echarts">
                <Echarts ref="myEcharts" :options="options" :key="key">
                </Echarts>
            </div>

            <!-- 数据 寝室dorm -->
            <div class="dorm">
                <!-- 男生女生 -->
                <div class="gender">
                    <div>男生</div>
                    <div>女生</div>
                </div>
                <!-- 寝室楼 -->
                <div class="floor">
                    <!-- 渲染 -->
                    <div v-for="item in floorData" :key="item.floor">
                        <p>{{ item.num }}</p>
                        <p>{{ item.floor }}</p>
                    </div>
                    <!-- <div>
                        <p>332</p>
                        <p>D区寝室楼</p>
                    </div>
                    <div>
                        <p>332</p>
                        <p>D区寝室楼</p>
                    </div>
                    <div>
                        <p>332</p>
                        <p>D区寝室楼</p>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-centent_container {
    width: 100%;
    height: 150px;
    margin: 10px 0 0 0;

    /* 主要内容部分*/
    .left-centent-conter {
        width: 100%;
        height: calc(100% - 40px);
        background: #092c75;
        display: flex;
        box-sizing: border-box;

        /*图表 */
        .echarts {
            flex: 1;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 寝室学生部分 */
        .dorm {
            flex: 2;
            color: #edf0f5;

            .gender {
                width: 100%;
                display: flex;
                height: 40px;
                justify-content: space-around;
                align-items: center;
            }

            .floor {
                width: 100%;
                text-align: center;
                display: flex;
                font-size: 13px;

                >div {
                    flex: 1;

                    p {
                        margin: 5px 3px;
                    }

                    p:nth-child(2) {
                        line-height: 20px;
                        font-size: 11px;
                        border-bottom: 2px solid #fff;
                    }
                }
            }
        }
    }

}
</style>
